Settings Popup Tabs

Overriding Settings Tabs

You can add new settings tabs by using addCustomSettingsTab function from the override file

export interface TabTypeWithIcon {
    readonly id: string;
    readonly label: string;
    readonly content: () => React.ElementType;
    readonly icon: JSX.Element;
    readonly testId?: string;
}

export const TabsContainer = () => {
    type TabDeclaration = TabTypeWithIcon | string;
    type ChartSettingsTabs = TabDeclaration[];
    const chartSettingsTabs: ChartSettingsTabs = [];
    return chartSettingsTabs;
}

Example

Source code:

import React from 'react';
import { Checkbox } from '@dx-private/dxchart5-react/dist/chart-kit/Checkbox/Checkbox.component';
import { ChartSettingsContentProps } from '@dx-private/dxchart5-react/dist/chart/components/chart-settings/chart-settings-content.component';
import { ChartSettingsField } from '@dx-private/dxchart5-react/dist/chart/components/chart-settings/chart-settings-field.component';
import { ChartSettingsFieldset } from '@dx-private/dxchart5-react/dist/chart/components/chart-settings/chart-settings-fieldset.styled';
import { TabTypeWithIcon } from '@dx-private/dxchart5-react/dist/chart/components/chart-settings/chart-settings.model';
import { chartSettingsLens } from '@dx-private/dxchart5-react/dist/chart/view-models/chart-configurator.view-model';
import { FlexContainer } from '../../../../src/components/FlexContainer';
import { ChartReactAppWrapper } from '../../../../src/components/ChartReactApp';
import { addCustomSettingsTab } from '@dx-private/dxchart5-react/dist/chart/ui-overrides/settings';
import { useIcons } from '@dx-private/dxchart5-react/dist/chart/ui-overrides';
const CustomTab = (props: ChartSettingsContentProps) => {
    return (
        <ChartSettingsFieldset>
            <ChartSettingsField label="Turn on/off crossTool, grid, volumes">
                <Checkbox
                    value={
                        props.value.chartCore.components.grid.visible &&
                        props.value.chartCore.components.crossTool.type !== 'none' &&
                        props.value.chartCore.components.volumes.visible
                    }
                    onValueChange={(enabled: boolean = false) => {
                        props.onValueChange(chartSettingsLens(['chartCore', 'components', 'crossTool']), {
                            magnetTarget: 'none',
                            type: 'cross-and-labels',
                        });
                        props.onValueChange(chartSettingsLens(['chartCore', 'components', 'grid', 'visible']), enabled);
                        props.onValueChange(chartSettingsLens(['chartCore', 'components', 'volumes']), {
                            visible: enabled,
                            showSeparately: false,
                        });
                    }}
                />
            </ChartSettingsField>
        </ChartSettingsFieldset>
    );
};
export const OverridingSettingsTabsComponent = () => {
    const iconsConfig = useIcons();
    const myCustomTabs: TabTypeWithIcon[] = [
        {
            id: 'Custom Tab',
            label: 'Custom Tab',
            content: () => CustomTab,
            icon: iconsConfig.drawings.drawingsTypes.callout,
        },
    ];
    const overriddenTabs = addCustomSettingsTab(myCustomTabs, 3);
    return (
        <FlexContainer justifyContent={'flex-start'}>
            {/* TODO fix TS error */}
            {/* @ts-ignore */}
            <ChartReactAppWrapper uiOverrides={{ ChartSettingsTabs: overriddenTabs }} />
        </FlexContainer>
    );
};